<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>16.聚光灯</title>
</head>
<body>
	<canvas id="canvas" style="background-color: #757575;"></canvas>
	<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/primitives.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/texture-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/chroma.min.js"></script>
	<script type="x-shader/x-vertex" id="vertex">
		attribute vec4 a_position;
		attribute vec3 a_normal;
		uniform mat4 u_projection;
		uniform vec3 u_lightWorldPosition;
		uniform mat4 u_view;
		uniform mat4 u_world;
		varying vec3 v_normal;
		
		varying vec3 v_surfaceToLight;
		varying vec3 v_surfaceToView;
		void main(){
			gl_Position =  u_projection * u_view * u_world * a_position;
			//gl_Position.xyz/=1.02;

			v_normal=(u_world*vec4(a_normal,1.)).xyz;
			v_surfaceToView=(u_world*vec4(a_position)).xyz;
			v_surfaceToLight=(vec4(u_lightWorldPosition-v_surfaceToView,1)).xyz;
		}
	</script>
	<script type="x-shader/x-fragment" id="fragment">
		precision mediump float;
		uniform vec3 u_color;
		varying vec3 v_normal;
		uniform float u_innerLimit;          // in dot space
		uniform float u_outerLimit;          // in dot space
		varying vec3 v_surfaceToLight;
		varying vec3 v_surfaceToView;
		void main(){
			gl_FragColor = vec4(u_color, 1.0 ) ;
			float inLight = smoothstep( u_outerLimit, u_innerLimit,dot(normalize(v_surfaceToView),
			-normalize(v_surfaceToLight)));//Hermite 插值
			float light = inLight * dot(normalize(v_normal), normalize(v_surfaceToView));
			gl_FragColor.rgb*=light;
			//float intensity = 1.05 - dot( v_normal, vec3( 0.0, 0.0, 1.0 ) );
			//vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );
			//gl_FragColor = vec4( vec3(0.3,0.5,0.2) + atmosphere, 1.0 );
		}
	</script>
	<script>
		const canvas = document.getElementById("canvas");
		canvas.width=window.innerWidth
		canvas.height=window.innerHeight
		const gl = canvas.getContext("webgl")
		const aspect = gl.canvas.clientWidth/ gl.canvas.clientHeight;
		const programInfo=webglUtils.createProgramInfo(gl,["vertex","fragment"])
		const planeBufferInfo = primitives.createCubeBufferInfo(
			gl,
			40
		);
		// const planeBufferInfo = primitives.createSphereBufferInfo(
		// 	gl,
		// 	20,  // radius
		// 	50, // subdivisions around
		// 	50,  // subdivisions down
		// );
		gl.useProgram(programInfo.program)
		const cameraMatrix = m4.lookAt([50,50,50],[0,0,0],[0,1,0])
		const viewMatrix=m4.inverse(cameraMatrix)
		function degToRad(d) {
			return d * Math.PI / 180;
		}
		
		var cameraPosition = [0, 0, 2];
		var world=m4.translation(0, 0, 0)
		let t=1
		let limit=60
		let innerLimit=30
		let outerLimit=29

		setInterval(()=>{
			if(innerLimit>=60){
				t=-1
			}
			if(innerLimit<=0){
				t=1
			}
			innerLimit+=t
			outerLimit+=t
			console.log("outerLimit:",outerLimit);
			console.log("outerLimit:",t);
			gl.useProgram(programInfo.program)
			//world = m4.yRotate(world, 0.001)
			const projectionMatrix=m4.perspective(degToRad(60), aspect, 1, 2000);
			webglUtils.setBuffersAndAttributes(gl, programInfo, planeBufferInfo);
			webglUtils.setUniforms(programInfo, {
				u_view: viewMatrix,					//视图
				u_projection: projectionMatrix,		//投影
				u_world:world,	//世界
				u_lightWorldPosition:[0,-400,0],
				u_color:[0.5,0.5,0.5],
				u_outerLimit:Math.cos(degToRad(outerLimit)),
				u_innerLimit:Math.cos(degToRad(innerLimit))
			});
			
			gl.enable(gl.DEPTH_TEST);
			webglUtils.drawBufferInfo(gl, planeBufferInfo);
		},0)
	</script>
</body>
</html>